<script setup lang="ts">
import {SubjectsForm, SubjectsQuery} from "@/api/subjects/types";

/**
 * @see {@link https://vuejs.org/api/sfc-script-setup.html#defineoptions}
 */
defineOptions({
  name: "Order",
  inheritAttrs: false,
});
import { UploadFile, ElLoading } from "element-plus";
import lodash from 'lodash-es'
import {
  getOrderPage,
} from "@/api/order";

import { OrderQuery} from "@/api/order/types";
import {listAll} from "@/api/store";
import {StoreForm} from "@/api/store/types";
import moment from "moment/moment";

const queryFormRef = ref(ElForm); // 查询表单

const loading = ref(false);
const total = ref(0);
const monthList = ref<[]>([])
const storeList = ref<StoreForm[]>();

const queryParams = reactive<OrderQuery>({
  pageNum: 1,
  pageSize: 20,
});
const orderList = ref<[]>();



/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
	if (lodash.size(monthList.value) > 0){
		lodash.set(queryParams, 'startMonth', monthList.value[0])
		lodash.set(queryParams, 'endMonth', monthList.value[1])
	}
  getOrderPage(queryParams)
    .then(({ data }) => {
	  	orderList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function resetQuery() {
  queryParams.pageNum = 1;
  handleQuery();
}

/**
 * 获取所有店铺
 */
function getAllStore() {
	listAll().then((response) => {
		storeList.value = []
		const group_store = lodash.groupBy(response.data, 'storeKeyName');
		for (let key in group_store) {
			storeList.value.push({'label': key, 'options': group_store[key]})
		}
	})
}

onMounted(() => {
	let now = new Date()
	let month = now.getMonth()
	let nowMonth;
	if (month < 9){
		nowMonth = now.getFullYear() + '0' + (now.getMonth() + 1) + ''
	}	else {
		nowMonth = now.getFullYear() + '' + (now.getMonth() + 1) + ''
	}
	monthList.value = [nowMonth, nowMonth]
  handleQuery(); // 初始化标准订单配置列表数据
	getAllStore()
});
</script>

<template>
  <div class="app-container">
    <el-row :gutter="20">

      <el-col>
        <div class="search-container">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
						<el-form-item label="订单月份">
							<el-date-picker
									style="width: 200px"
									v-model="monthList"
									type="monthrange"
									range-separator="至"
									start-placeholder="开始月份"
									end-placeholder="结束月份"
									value-format="YYYYMM"
									:clearable="false"
							/>
						</el-form-item>
            <el-form-item label="原始主订单号" prop="sourcePreformMainNo">
              <el-input
                      v-model="queryParams.sourcePreformMainNo"
                      placeholder="请输入原始主订单号"
                      clearable
                      style="width: 200px"
                      @keyup.enter="handleQuery"
              />
            </el-form-item>
						<el-form-item label="电商平台店铺名称" prop="platformStoreCode">
							<el-select class="yz-el-select" v-model="queryParams.platformStoreCode" filterable clearable placeholder="请选择店铺">
								<el-option-group
									v-for="group in storeList"
									:key="group.label"
									:label="group.label"
								>
									<el-option
										v-for="item in group.options"
										:key="item.id"
										:label="item.innerSystemStoreName"
										:value="item.commercePlatformStoreCode"
									/>
								</el-option-group>
							</el-select>
						</el-form-item>
            <el-form-item>
              <el-button type="primary" @click="resetQuery"
                ><i-ep-search />搜索</el-button
              >
              <el-button @click="resetQuery">
                <i-ep-refresh />
                重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>

        <el-card shadow="never">
          <el-table
            size="small"
            :height="orderList && orderList.length > 0 ? 640 : 130"
            :header-row-style="{color: 'dimgray'}"
            v-loading="loading"
            :data="orderList"
						border
          >
            <el-table-column
              label="发退货时间"
              width="140"
              align="center" show-overflow-tooltip
              prop="sendReturnTime"
            />
            <el-table-column
              label="下单时间"
              align="center" show-overflow-tooltip
              prop="orderTime"
              width="140"
            />
            <el-table-column
              label="电商平台店铺名称"
              align="center" show-overflow-tooltip
              prop="platformStoreName"
              width="140"
            />
						<el-table-column
								label="原始主订单号"
								align="center" show-overflow-tooltip
								prop="sourcePreformMainNo"
								width="150"
						/>
						<el-table-column
								label="原始子订单号"
								align="center" show-overflow-tooltip
								prop="sourcePreformSubNo"
								width="150"
						/>
						<el-table-column
								label="OMS单号"
								align="center" show-overflow-tooltip
								prop="omsNo"
								width="150"
						/>
            <el-table-column
              label="PO单号"
              align="center" show-overflow-tooltip
              prop="poNo"
              width="80"
            />
            <el-table-column
              label="内部系统电商平台名称"
              align="center" show-overflow-tooltip
              prop="innerShopName"
              width="80"
            />
            <el-table-column
              label="财务系统店铺名称"
              align="center" show-overflow-tooltip
              prop="billSysStoreName"
            />
            <el-table-column
              label="商品单价"
              align="center" show-overflow-tooltip
              prop="price"
              width="80"
            />
            <el-table-column
              label="发货数量"
              align="center" show-overflow-tooltip
              prop="qty"
              width="80"
            />
            <el-table-column
              label="发货金额"
              align="center" show-overflow-tooltip
              prop="sendAmount"
              width="80"
            />
            <el-table-column
              label="退货数量"
              align="center" show-overflow-tooltip
              prop="returnQty"
              width="80"
            />
            <el-table-column
              label="退货金额"
              align="center" show-overflow-tooltip
              prop="returnAmount"
              width="80"
            />
            <el-table-column
              label="所属平台"
              align="center" show-overflow-tooltip
              prop="platform"
							width="120"
            />
          </el-table>

          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>
